前言

(圖多，建議用電腦看)

當我們架設好網站，下一步要把它公開放到網路上 (全新 hugo site 上線拉)。

GitHub 是一個提供我們把本地 (簡言之就是自己的電腦) 檔案、程式碼、離離扣扣的東西，透過 git 版本控制，將檔案推到遠端 (簡言之就是別人的電腦) 委託給 GitHub 保管的服務平台。

今天要介紹的內容主要包括 GitHub 註冊、把網站放 (部署) 到 GitHub Pages 上、一點點的 git 操作，一點點的版本控制指令等，對於沒有使用過 git，甚至是對程式碼、版本控制這些東西都很陌生的人，建議可以先 google 一輪，有個概念，最重要的是，為你的電腦安裝好 git CLI。

TL;DR

網站部署

註冊 GitHub 帳號

• 到官網註冊 https://github.com/

順帶一提，若之後沒有想要特別買網址，這邊的 username 會是網站網址的一部分 (GitHub Pages 默認)，但若是不 care 網址長怎樣，建議使用自己習慣的「常用帳號」作為 username。

建立一個 GitHub Repository

• 註冊完成之後，轉跳到這個畫面，請點右上角的 ＋：

• 按下 New repository，建立一個新的資源庫

• 請注意，Repository name 一定要填入 your-username.github.io，以筆者自己為例，我的 username 是 littlebookboy，則建立資源庫名稱就要使用 littlebookboy.github.io，這是 GitHub Pages 的機制；填寫完必要資訊，按下建立：

部署到 GitHub Pages

以下說明會以筆者的 Repository 為例。

• cd 到 Hugo 專案底下，執行 hugo 指令，打包你的 Hugo Site：

若是要連同草稿、未來發布等文章一併打包，請下配合的參數，例如 hugo -D。

• 複製剛剛建立好的 Repository URL，位置在：

• 執行 git remote 註冊，註冊好遠端地址後，可下 git remote -v 列出看看：

• 將目前異動提交成一個 commit：

• 提交完成後，下 git push：

整個指令執行過程

# 獲取 Repository URL，例如 git@github.com:littlebookboy/littlebookboy.github.io.git

# 進入到專案底下，打包你的網站，生成 public 資料夾
$ hugo

# 進入到專案底下，執行遠端資源庫地址註冊
$ cd your-site/
$ git init
$ git remote add git@github.com:littlebookboy/littlebookboy.github.io.git

# 確認遠端資源庫地址註冊成功
$ git remove -v

# 將目前異動提交成一個 commit
$ git add .
$ git commit -m 'initial site'

# 推送 commit
$ git push

瀏覽結果

此時你可以開啟 https://your-username.github.io 瀏覽看看網站是否已經部署成功，理論上不會等太久，就可以看到頁面了。

買一個域名，自訂網址

以下說明，是以筆者自身使用 GoDaddy 購買網址設置為例，各位可以向自己熟悉的域名提供商購買網址。

避免有打廣告的嫌疑，在此註明，若有結帳成功，錢都是 GoDaddy 賺走。

挑網址

搜尋一個你喜歡的網址，購物車中不要加離離扣扣他推薦的東西 (以最便宜的方式買一個網址，但如果你很確定自己在幹嘛就另當別論)：

然後結帳刷卡，Done。

CNAME 設置

• 透過 Repository Setting 設定你的 GitHub Pages NAME：

• 找到 GitHub Pages 設置區塊，寫入剛剛買的域名到 Custom domain 中：

• 新增一份純文字檔案，檔名 CNAME，將檔案放到你的 ./site/public 底下，內容如下所示：

GoDaddy DNS 設置

在本地終端機執行以下指令，取得 GitHub IP：

dig littlebookboy.github.io

將剛剛下指令輸出的 IP，設置到 GoDaddy DNS 管理介面中 (添加 A 紀錄)：

上圖是以 blog.genesu.me 為例 (增添兩筆 CNAME)，若不使用子域名的人，可以直接新增一筆 CNAME 即可：

CNAME www littlebookboy.github.io

# 請記得 ./site/public/CNAME 檔案內容要一併改成你購買的域名 (不包括子域名)

小結

恭喜～至此我們的網站已經上線完成，網址應該也都搞定了。

另外，官方文件有提到一個能協助我們更方便完成部署網站的 CLI 工具，叫 Nanobox，有興趣的人可以玩玩看，目前筆者沒有計畫要寫。

另外另外，官方文件有列出其他的 web server，提供你放靜態網站：

• AWS
• Firebase
• GitLab
• Bitbucket
• Netlify
• ...等等

筆者就不在此一一介紹，有興趣的人可以試用看看。

參考連結

• Hugo Hosting & Deployment